<template>
  <div>
    <el-container>
      <el-header style="height: auto;">
        <el-form :inline="true" style="margin-top: 10px">
          <el-form-item label="项目" class="mt-form-item-left" style="width: 150px">
            <el-select
              v-model="project_id"
              v-loading="projectsLoading"
              style="width: 100px"
              placeholder="项目"
              filterable
              clearable
              @change="handleChangeProject"
            >
              <el-option label="所有" value="" />
              <el-option
                v-for="item in projects"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" style="width: 170px">
            <el-select v-model="upload_state" clearable placeholder="状态" style="width: 120px">
              <el-option
                v-for="item in uploadStateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择网站" class="mt-form-item-left">
            <el-select v-model="select_web" placeholder="选择网站" filterable clearable @change="handleChangeWeb">
              <el-option label="所有" value="" />
              <el-option
                v-for="item in websites"
                :key="item.id"
                :label="item.domain"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-date-picker
              v-model="timerange"
              type="datetimerange"
              value-format="timestamp"
              :picker-options="pickerOptions"
              range-separator="至"
              :default-time="['0:00:00', '23:59:59']"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item style="width:100px;">
            <el-button type="primary" style="float: right;" @click="getList">分析</el-button>
          </el-form-item>
          <el-form-item style="width:100px;">
            <el-button type="info" @click="orderdetailVisual=true">订单</el-button>
          </el-form-item>
          <el-form-item style="width:100px;">
            <el-button type="danger" icon="el-icon-date" @click="handleShowAdsAlert">所有提醒</el-button>
          </el-form-item>
          <el-form-item style="width:100px;margin-left: 10px">
            <el-button type="warning" style="color: white" @click="handleSingleStatics('')">销售曲线
            </el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-row :gutter="40" style="background:#fff;margin-bottom:1px;">
          <el-col v-if="total_sales > 0" :xs="24" :sm="24" :lg="20" class="card-panel-col">
            <div class="card-panel">
              总销售额:${{ total_sales }} 非本月订单退款:{{ refund_amount_sum }} <span v-if="profit > 0">利润${{ profit }}</span>
              <span v-if="profit_rate > 0">利润率:{{ profit_rate }}%</span>
              <span v-if="g_total_purchase_cost > 0">采购${{ g_total_purchase_cost }}</span> <span v-if="total_cost > 0">广告费${{ total_cost }} 广告成本:{{ parseInt(100*total_cost/total_sales) }}% ROI:{{ (total_sales/total_cost).toFixed(1) }}</span>
              订单总数:{{ total_orders }} 日均销售:${{ daily_sales }} 均单价:{{ order_sales }}
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="4" class="card-panel-col" style="float: right">
            <el-input v-model="search" size="mini" clearable placeholder="过滤网站" style="float: right">
              <el-button slot="append" icon="el-icon-search" />
            </el-input>
          </el-col>
        </el-row>
        <el-table
          v-loading="loading"
          :data="order_datas.filter(data => !search || data.domain.toLowerCase().includes(search.toLowerCase())|| data.paypal_api_account.toLowerCase().includes(search.toLowerCase()))"
          border
          height="700"
          show-summary
          :default-sort="{prop: 'create_at', order: 'descending'}"
          style="width: 100%;border:2px solid black;color:black"
        >
          <el-table-column
            fixed
            sortable
            prop="domain"
            label="域名"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.suspended">
                <i slot="reference" class="el-icon-error" style="color:red;margin-right:5px;" @click="handleShowGMCINfo(scope.row)" />
              </span>
              <span v-else>
                <i v-if="scope.row.accountLevelIssues.length > 0" slot="reference" class="el-icon-warning" style="color:yellow;margin-right:5px;" @click="handleShowGMCINfo(scope.row)" />
                <i v-else slot="reference" class="el-icon-success" style="color:green;margin-right:5px;" @click="handleShowGMCINfo(scope.row)" />
              </span>
              <a type="primary" title="点击查看订单统计图" @click="handleSingleStatics(scope.row.website_id)">
                {{ scope.row.domain }}<br>{{ scope.row.website_tag }}
              </a>
            </template>
          </el-table-column>
          <el-table-column
            fixed
            width="100"
            prop="upload_state"
            label="网站状态"
          >
            <template slot-scope="scope">
              <el-tooltip v-if="scope.row.note !== ''" class="item" effect="dark" :content="scope.row.note" placement="right">
                <a title="点击修改网站基本信息" @click="handleShowModifyWebsite(scope.row)">{{ handleGetWebsiteStateLabel(scope.row.upload_state) }}</a>
              </el-tooltip>
              <a v-else title="点击修改网站基本信息" @click="handleShowModifyWebsite(scope.row)">{{ handleGetWebsiteStateLabel(scope.row.upload_state) }}</a>
            </template>
          </el-table-column>
          <el-table-column
            fixed
            sortable
            width="80"
            prop="total_orders"
            label="订单"
          >
            <template slot-scope="scope">
              <a type="primary" title="点击查看订单情况" @click="handleShowOrders(scope.row)">{{ scope.row.total_orders }}</a>
            </template>
          </el-table-column>
          <el-table-column
            fixed
            sortable
            width="110"
            prop="daily_sales"
            label="日均销售"
          >
            <template slot-scope="scope">
              ${{ scope.row.daily_sales }}
            </template>
          </el-table-column>
          <el-table-column
            fixed
            sortable
            prop="total_sales"
            width="100"
            label="销售额"
          >
            <template slot-scope="scope">
              ${{ scope.row.total_sales }}
            </template>
          </el-table-column>
          <el-table-column
            fixed
            sortable
            width="90"
            prop="refund_sum"
            label="退款"
          >
            <template slot-scope="scope">
              ${{ scope.row.refund_sum }}
            </template>
          </el-table-column>
          <el-table-column
            fixed
            sortable
            width="90"
            prop="cost"
            label="广告费"
          >
            <template slot-scope="scope">
              ${{ scope.row.cost }}
            </template>
          </el-table-column>
          <el-table-column
            fixed
            sortable
            width="80"
            prop="roi"
            label="ROI"
          >
            <template slot-scope="scope">
              <a
                v-if="scope.row.roi <= 2.5"
                title="点击查看landing page详情"
                style="color:red;text-decoration:underline;"
                @click="handleShowLandingPage(scope.row)"
              >{{ scope.row.roi }}</a>
              <a v-else title="点击查看landing page详情" @click="handleShowLandingPage(scope.row)">{{ scope.row.roi }}</a>
            </template>
          </el-table-column>
          <el-table-column
            fixed
            sortable
            width="90"
            prop="purchase_cost"
            label="采购"
          >
            <template slot-scope="scope">
              ${{ scope.row.purchase_cost.toFixed(1) }}
            </template>
          </el-table-column>
          <el-table-column
            fixed
            sortable
            width="90"
            prop="purchase_cost"
            label="成本率"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.total_sales > 0">{{ ((scope.row.purchase_cost)*100/scope.row.total_sales).toFixed(1) }}%</span>
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed
            sortable
            width="90"
            prop="purchase_cost"
            label="利润"
          >
            <template slot-scope="scope">
              ${{ (scope.row.total_sales-scope.row.purchase_cost-scope.row.cost - scope.row.refund_sum).toFixed(1) }}
            </template>
          </el-table-column>
          <el-table-column
            fixed
            sortable
            width="90"
            prop="purchase_cost"
            label="利润率"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.total_sales > 0">{{ ((scope.row.total_sales-scope.row.purchase_cost-scope.row.cost-scope.row.refund_sum)*100/scope.row.total_sales).toFixed(1) }}%</span>
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed
            width="120"
            prop="ads_id"
            label="广告账号"
          >
            <template slot-scope="scope">
              <el-popover
                placement="top-start"
                title="账号信息"
                width="600"
                trigger="click"
              >
                <div>
                  <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <p>经理账号:{{ scope.row.manager }}</p>
                      <p>广告 ID:{{ scope.row.ads_id }}</p>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                      <p>mc服务器:{{ scope.row.api_url }}</p>
                    </el-col>
                  </el-row>
                  <el-button @click="handleShowAdsDetail(scope.row)">详情</el-button>
                </div>
                <span slot="reference">{{ scope.row.ads_id }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            fixed
            label="操作"
            width="300"
          >
            <template slot-scope="scope">
              <el-button size="mini" title="修改产品信息" type="default" @click="showFeedProductModify(scope.row)">产品</el-button>
              <el-button size="mini" title="merchant cetner账号" type="success" @click="handleShowGoogleMerchant(scope.row)">MC</el-button>
              <el-badge v-if="scope.row.addnotes > 0" style="margin-left: 10px;margin-right: 10px;" :value="scope.row.addnotes" class="item">
                <el-button size="mini" type="primary" @click="handleAdwordsNote(scope.row)">提醒</el-button>
              </el-badge>
              <el-button v-else size="mini" type="primary" @click="handleAdwordsNote(scope.row)">提醒</el-button>
              <el-dropdown>
                <el-button type="default" size="mini">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native.stop="handleWebModule(scope.row)">网站模块管理</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>

          </el-table-column>
        </el-table>
        <el-pagination
          v-if="order_datas.length"
          background
          class="mt-pagination"
          :current-page="page"
          :page-sizes="[10,50,100,200,300,500]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </el-main>
      <el-dialog
        title="效果信息保存历史"
        style="margin-top: 15px;"
        :visible.sync="showperformanceHistory"
        width="50%"
      >
        <el-table
          :data="adsmanagerperformancedata"
          style="width: 100%"
        >
          <el-table-column
            prop="date_range"
            label="日期范围"
          />
          <el-table-column
            prop="create_at"
            label="创建日期"
          />
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showperformanceHistory = false">取 消</el-button>
          <el-button type="primary" @click="showperformanceHistory = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :title="gmcinfo_title"
        style="margin-top: 15px;"
        :visible.sync="dialogGMCInfoVisiible"
      >
        <h3>GMC产品信息:</h3>
        <el-row :gutter="20">
          <el-col :span="24">
            <span style="margin-right: 1px">active产品:</span><span style="margin-right: 10px;color:red">{{ GMCInfo.active_products }}</span>
            <span style="margin-right: 1px">等待产品:</span><span style="margin-right: 10px;color:red">{{ GMCInfo.waiting }}</span>
            <span style="margin-right: 1px">失败产品:</span><span style="margin-right: 10px;color:red">{{ GMCInfo.failed }}</span>
          </el-col>
        </el-row>
        <el-row>
          <span style="margin-right: 1px">同步时间:</span><span style="margin-right: 10px;color:red">{{ GMCInfo.mc_sync_at }}</span>
        </el-row>
        <div v-if="GMCInfo.accountLevelIssues.length > 0">
          <h3 style="color: red">GMC账号级错误</h3>
          <json-viewer
            :value="GMCInfo.accountLevelIssues"
            :expand-depth="5"
            copyable
            boxed
            sort
          />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogGMCInfoVisiible = false">取 消</el-button>
          <el-button type="primary" @click="dialogGMCInfoVisiible = false">确 定</el-button>
        </div>
      </el-dialog>
      <webmodules
        :show-dialog="webModuleControl.webModuleVisuable"
        :website_id="webModuleControl.current_website_id"
        :domain="webModuleControl.current_website_domain"
        @closeMyDialog="webModuleControl.webModuleVisuable=false"
      />
      <orderstatics
        :order-static-visible="orderStaticVisible"
        :website_id="current_website_id"
        @closeMyDialog="orderStaticVisible=false"
      />
      <adwordsrecharges
        :show-dialog="adwordsrechargesVisuable"
        :website_id="current_website_id"
        @closeMyDialog="adwordsrechargesVisuable=false"
      />
      <adwordsmodifynote
        :show-dialog="adwordsModifyNoteVisuable"
        :website_id="current_website_id"
        :domain="current_website_domain"
        @closeMyDialog="adwordsModifyNoteVisuable=false"
      />
      <orderdetail
        :order-static-visible="orderdetailVisual"
        :product_url="product_url"
        :website_id="current_website_id"
        :time_start="time_start"
        :time_end="time_end"
        @closeMyDialog="orderdetailVisual=false"
      />
      <merchant
        :merchant-visible="merchantVisible"
        :website_id="merchant_website_id"
        @closeMerchantDialog="merchantVisible=false"
      />
      <prestaproduct
        :domain="currentOpRow.web__domain"
        :local_id="currentOpRow.id"
        :product_id="currentOpRow.product_id"
        :pst-visible="remoteModifydialogVisible"
        @closePstDialog="remoteModifydialogVisible=false"
      />
      <googleadsreportconfig
        :d-visible="googleReportConfigVisual"
        @closeMyDialog="googleReportConfigVisual=false;"
      />
      <feedproductmodify
        :pst-visible="feedproductVisual"
        :website_id="current_website_id"
        :domain="current_website_domain"
        @closePstDialog="feedproductVisual=false"
      />
      <googleadsstatics
        :google-ads-static-visuable="googleAdsStaticVisuable"
        :ads_id="current_ads_id"
        @closeMyDialog="googleAdsStaticVisuable=false"
      />
      <googleadsreportlandingpage
        :website_id="landing_website_id"
        :is-visible="showLandingPage"
        :getdomain="landing_website_domain"
        @closeWebDialog="showLandingPage=false"
      />
      <modifywebsite
        :website_id="modify_website_id"
        :domain="modify_website_domain"
        :pst-visible="modifyWebsiteVisuable"
        @closeMyDialog="modifyWebsiteVisuable=false"
      />
      <googleadsdetail
        :kw="googleAdsControl.ads_detail_website_id"
        :domain="googleAdsControl.ads_detail_website_domain"
        :visible="googleAdsControl.googleadsdetailVisible"
        @closeDialog="googleAdsControl.googleadsdetailVisible=false"
      />
    </el-container>
  </div>

</template>

<script>
import { Get as GetProjects } from '@/api/erp/elicink/project'
import { Get as GetWebsite, GetWebsiteStateOptions } from '@/api/erp/elicink/website'
import { Get as GetAdsManagerDataRange } from '@/api/orders/googleadsmanagerreport'
import { OrdersGetWebOrderStatics } from '@/api/orders/ordersapi'
import orderdetail from '@/views/orders/element/orderdetail'
import orderstatics from '@/views/orders/element/orderStatics'
import merchant from '@/views/orders/element/merchant'
import qs from 'qs'
import JsonViewer from 'vue-json-viewer'

import Cookies from 'js-cookie'
import Adwordsrecharges from './element/adwordsrecharges'
import adwordsmodifynote from './element/adwordsmodifynote'
import prestaproduct from '@/views/prestashop/element/prestaproduct'
import Googleadsreportconfig from './element/googleadsreportconfig'
import feedproductmodify from '@/views/orders/element/feedproductmodify'
import Googleadsstatics from './element/googleAdsStatics'
import Googleadsreportlandingpage from './element/googleadsreportlandingpage'
import Modifywebsite from '../prestashop/element/modifywebsite'
import Webmodules from '../prestashop/element/webmodules'
import Googleadsdetail from './element/googleadsdetail'

export function getToken(key) {
  const v = Cookies.get(key)
  return v && parseInt(v) || null
}

export function setToken(key, value) {
  return Cookies.set(key, value, { expires: 30 })
}

const ProjectKey = 'orders_project_id'
export default {
  name: 'Salessum',
  components: {
    JsonViewer,
    Googleadsdetail,
    Webmodules,
    Modifywebsite,
    Googleadsreportlandingpage,
    Googleadsstatics,
    feedproductmodify,
    Googleadsreportconfig,
    prestaproduct,
    adwordsmodifynote,
    merchant,
    orderdetail,
    Adwordsrecharges,
    orderstatics
  },
  data() {
    return {
      dialogGMCInfoVisiible: false,
      gmcinfo_title: 'GMC信息',
      GMCInfo: {
        accountLevelIssues: '',
        suspended: false
      },
      googleAdsControl: {
        googleadsdetailVisible: false,
        ads_detail_website_id: '',
        ads_detail_website_domain: ''
      },
      webModuleControl: {
        webModuleVisuable: false,
        current_website_id: '',
        current_website_domain: ''
      },

      uploadStateOptions: GetWebsiteStateOptions(),
      modify_website_id: '',
      modify_website_domain: '',
      modifyWebsiteVisuable: false,
      landing_website_domain: '',
      landing_website_id: '',
      showLandingPage: false,
      googleAdsStaticVisuable: false,
      current_ads_id: '',
      feedproductVisual: false,
      googleReportConfigVisual: false,
      adsmanagerperformancedata: [],
      showperformanceHistory: false,
      remoteModifydialogVisible: false,
      currentOpRow: {
        'id': 0,
        'name': '',
        'price': '',
        'description': '',
        'long_description': '',
        'meta_title': '',
        'meta_description': '',
        'meta_keywords': '',
        'web__domain': '',
        'product_id': ''
      },
      search: '',
      show_performance: false,
      merchant_website_id: '',
      merchantVisible: false,
      orderdetailVisual: false,
      product_url: '',
      adwordsrechargesVisuable: false,
      adwordsModifyNoteVisuable: false,
      total_sales: 0,
      profit: 0,
      profit_rate: 0,
      refund_amount_sum: 0,
      g_total_refunds: 0,
      g_total_purchase_cost: 0,
      total_cost: 0,
      total_orders: 0,
      order_sales: 0,
      daily_sales: 0,
      orderStaticVisible: false,
      loading: false,
      time_start: '',
      time_end: '',
      current_website_id: '',
      current_website_domain: '',
      projects: [],
      project_id: null,
      projectsLoading: false,
      timerange: '',
      select_web: '',
      upload_state: '',
      kwInput: '',
      order_by: 'create_at',
      order_desc: 1,
      // pagination
      pagesize: 500,
      fileList: [],
      base_api: '',
      filter: {},
      page: 1,
      total: 0,
      websites: [],
      order_datas: [],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime())
            start.setHours(0, 0, 0)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '昨天下班后',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setHours(19, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
            start.setHours(0, 0, 0)
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近3天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            start.setHours(0, 0, 0)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            start.setHours(0, 0, 0)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '过去14天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
            start.setHours(0, 0, 0)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '过去30天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            start.setHours(0, 0, 0)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近6个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近1年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }
        ]
      }
    }
  },
  created() {
    this.project_id = getToken(ProjectKey)
    this.handleFetchProjects()
    this.handleGetWebsite()
    this.handleGetAdsManagerPerformanceHistory()
    this.base_api = process.env.VUE_APP_BASE_API + '/orders/api/orders_api_staticsbywebsite/'
  },
  methods: {
    handleGetWebsiteStateLabel(val) {
      for (let i = 0; i < this.uploadStateOptions.length; i++) {
        if (this.uploadStateOptions[i].value === val) {
          return this.uploadStateOptions[i].label
        }
      }
      return val
    },
    handleShowGMCINfo(row) {
      this.GMCInfo = row
      this.dialogGMCInfoVisiible = true
      this.gmcinfo_title = row.domain + 'GMC账号情况'
    },
    handleShowModifyWebsite(row) {
      this.modifyWebsiteVisuable = true
      console.log('hhfdsfdsf')
      this.modify_website_id = row.website_id
      this.modify_website_domain = row.domain
    },
    handleShowLandingPage(row) {
      this.landing_website_id = row.website_id
      this.landing_website_domain = row.domain
      this.showLandingPage = true
    },
    handleShowAdsChat(row) {
      this.current_ads_id = row.ads_id
      this.googleAdsStaticVisuable = true
    },
    getList() {
      this.loading = true
      this.show_performance = false
      OrdersGetWebOrderStatics(this.website_id, qs.stringify({
        project_id: this.project_id,
        kw: this.kwInput,
        website_id: this.select_web,
        upload_state: this.upload_state,
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        start: this.timerange ? this.timerange[0] : '',
        end: this.timerange ? this.timerange[1] : ''
      }))
        .then(response => {
          this.time_start = this.timerange ? this.timerange[0] : ''
          this.time_end = this.timerange ? this.timerange[1] : ''
          this.order_datas = response.data.data
          this.total = response.data.total
          this.daily_sales = response.data.daily_sales
          this.total_orders = response.data.total_orders
          this.total_sales = response.data.total_sales
          this.profit = response.data.profit
          this.g_total_refunds = response.data.g_total_refunds
          this.refund_amount_sum = response.data.refund_amount_sum
          this.profit_rate = response.data.profit_rate
          this.g_total_purchase_cost = response.data.g_total_purchase_cost
          this.total_cost = response.data.total_cost
          this.order_sales = response.data.order_sales
          this.loading = false
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
    },
    handleFetchProjects() {
      this.projectsLoading = true
      GetProjects()
        .then(response => {
          this.projectsLoading = false
          this.projects = response.data.data
          if (this.projects.length) {
            this.project_id = getToken(ProjectKey) || null
          }
        })
        .catch(e => {
          this.projectsLoading = false
        })
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    handleWebModule(row) {
      this.webModuleControl.webModuleVisuable = true
      this.webModuleControl.current_website_id = row.website_id
      this.webModuleControl.current_website_domain = row.domain
    },
    handleAdwords(row) {
      this.adwordsrechargesVisuable = true
      this.current_website_id = row.website_id
      this.current_website_domain = row.domain
    },
    handleShowGoogleMerchant(row) {
      this.merchant_website_id = row.website_id
      this.merchantVisible = true
    },
    handleShowOrders(row) {
      this.current_website_id = row.website_id
      this.orderdetailVisual = true
    },
    handleAdwordsNote(row) {
      this.adwordsModifyNoteVisuable = true
      this.current_website_id = row.website_id
      this.current_website_domain = row.domain
    },
    handleShowAdsAlert() {
      this.current_website_id = ''
      this.current_website_domain = ''
      this.adwordsModifyNoteVisuable = true
    },
    handleShowAdsDetail(row) {
      this.googleAdsControl = {
        googleadsdetailVisible: true,
        ads_detail_website_id: row.website_id,
        ads_detail_website_domain: row.domain
      }
    },
    showFeedProductModify(row) {
      this.current_website_id = row.website_id
      this.current_website_domain = row.domain
      this.feedproductVisual = true
    },
    handleSingleStatics(website_id) {
      this.current_website_id = website_id
      this.orderStaticVisible = true
    },
    handleGetWebsite() {
      GetWebsite(null, qs.stringify({ 'project_id': this.project_id })).then(response => {
        this.websites = response.data.data
      })
    },
    handleGetAdsManagerPerformanceHistory() {
      GetAdsManagerDataRange(null, '').then(response => {
        this.adsmanagerperformancedata = response.data.data
      })
    },
    handleChangeProject() {
      setToken(ProjectKey, this.project_id)
      this.handleGetWebsite()
    },
    handleChangeWeb() {
      this.page = 1
      this.search = ''
      this.getList()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleUploadError(err, file, fileList) {
      this.$notify({
        title: '失败',
        message: err,
        type: 'success',
        duration: 2000
      })
    },
    handleBeforeUplaod(file) {
      this.loading = true
      if (this.timerange === '') {
        this.$notify({
          title: '您没有选择日期',
          message: '必须选择跟文件同样的日期范围，否则数据会不准确',
          type: 'info',
          duration: 2000
        })
      }
      this.filter.project_id = this.project_id
      this.filter.kw = this.kwInput
      this.filter.website_id = this.select_web
      this.filter.pagesize = this.pagesize
      this.filter.page = this.page
      this.filter.order_by = this.order_by
      this.filter.start = this.timerange ? this.timerange[0] : ''
      this.filter.end = this.timerange ? this.timerange[1] : ''
      this.show_performance = true
    },
    handleExceed(files, fileList) {
      this.loading = true
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleSuccess(response, file, fileList) {
      this.loading = false
      this.time_start = this.timerange ? this.timerange[0] : ''
      this.time_end = this.timerange ? this.timerange[1] : ''
      this.order_datas = response.data.data
      this.total = response.data.total
      this.daily_sales = response.data.daily_sales
      this.total_orders = response.data.total_orders
      this.total_sales = response.data.total_sales
      this.order_sales = response.data.order_sales
      this.total_cost = response.data.total_cost
      this.profit = response.data.profit
      this.profit_rate = response.data.profit_rate
      this.g_total_purchase_cost = response.data.g_total_purchase_cost
      this.loading = false
      this.$notify({
        title: '处理完成',
        message: '已经处理完毕数据',
        type: 'success',
        duration: 2000
      })
    }
  }
}
</script>

<style scoped>
  .app-container >>> table, tr {
    border-color: black;
  }

  .el-header {
    height: 120px;
  }

  .el-header, .el-footer {
    background-color: #00c0ef;
    color: white;
  }

  .el-container >>> .pointer {
    cursor: pointer;
    color: #409EFF;
  }

  .el-container >>> a:visited {
    color: purple;
  }

  .el-container >>> a:link {
    color: #409EFF;
  }

  .el-container >>> a:active {
    color: red;
  }
  .mt-dialog >>> .el-dialog {
    margin: 10px auto !important;
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 60px;
    padding-top: 5px;
  }

</style>
